<template>
	<view class="pageBox">
		<view class="top_one" @click="togo" v-if="shopaddress">
			<view class=""
				style="width: 90%;margin-left: 5%;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;font-weight: 600;">
				<view>{{shopaddress.contacts}}</view>
				<view>{{shopaddress.contactNumber}}</view>
			</view>
			<view class=""
				style="width: 90%;margin-left: 5%;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;font-weight: 600;margin-top: 25rpx;">
				<view style="display: flex;align-items: center;width: 95%;">
					<image src="/static/dingwei.png" mode="aspectFill"
						style="width: 28rpx;height: 40rpx;margin-right: 10rpx;"></image>
					<view style="width: 95%;">{{shopaddress.receivingAddress}}</view>
				</view>
				<u-icon name="arrow-right" color="#D0B27E" size="28"></u-icon>
			</view>
		</view>
		<view class="top_one" @click="togo" v-else>
			<view class=""
				style="width: 90%;margin-left: 5%;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;font-weight: 600;margin-top: 25rpx;height: 70rpx;">
				<view style="display: flex;align-items: center;">
					<image src="/static/dingwei.png" mode="aspectFill"
						style="width: 14rpx;height: 20rpx;margin-right: 10rpx;"></image>
					<view>请选择地址</view>
				</view>
				<u-icon name="arrow-right" color="#D0B27E" size="28"></u-icon>
			</view>
		</view>
		<view class="" style="width: 710rpx;padding-bottom: 30rpx;background-color: #fff;">
			<view class="orderBox" v-for="(item,i) in list" :key="item.fName">
				<view class="title">
					<view class="iconfont icon-dianpu"></view>
					<!-- 店铺名称 -->
					<view class="storeName" style="display: flex;align-items: center;color: #D0B27E;font-size: 26rpx;">
						<image src="/static/dianzai.png" mode="aspectFill"
							style="width: 38rpx;height: 38rpx;margin-right: 20rpx;"></image>
						<view>{{ item.fName }}</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="main" v-for="(details,k) in item.cart" :key="details.productId">
					<image class="pic" :src="details.photoOssUrl" mode="aspectFill"></image>
					<view class="mainRight">
						<view class="shopName" style="font-size: 38rpx;font-weight: 600;">
							{{ details.productName }}
							<view class="" style="margin-top: 50rpx;">
								<view class="price"
									style="width: 500rpx;display: flex;justify-content: space-between;color: #D0B27E;">
									<view><span style="font-size: 25rpx;">￥</span> <span
											style="font-size: 38rpx;font-weight: 600;">{{ details.productPrice }}</span>
									</view>
									<view class="number_box">
										<u-number-box v-model="details.productNum" @change="valChange" :min="1"
											:max="100" integer></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view
				style="display: flex;justify-content: space-between;align-items: center;width: 680rpx;margin-left: 15rpx;">
				<view class="" style="font-size: 28rpx;font-weight: 600;">配送方式</view>
				<view class="">快递包邮</view>
			</view>
		</view>

		<view class="bottom_box">
			<view class="bottom_box_one">
				<view class="bottom_box_la">合计：</view>
				<view class="bottom_box_ba">￥</view>
				<view class="bottom_box_xa">{{ totalPrice }}</view>
			</view>
			<view class="bottom_box_button" @click="buyPay">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				receiptInformation: '',
				list: [],
				shopaddress: ''
			}
		},
		computed: {
			totalPrice() {
				let prices = 0;
				if (!!this.list) {
					this.list.map(shopItem => {
						shopItem.cart.map(goodItem => {
							prices += goodItem.productPrice * goodItem.productNum
						})
					})
				}
				return prices;
			}
		},
		onShow() {
			let shopList = uni.getStorageSync('shop')
			shopList = JSON.parse(shopList)
			this.list = JSON.parse(JSON.stringify(shopList))
			if (uni.getStorageSync('shopaddress')) {
				this.shopaddress = JSON.parse(uni.getStorageSync('shopaddress'))
			}
		},
		methods: {
			togo() {
				uni.navigateTo({
					url: '/pages/shop/dizhiList/dizhiList'
				})
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			// async creadDetails() {
			// 	let res = await this.$api.request('group/productDetail/' + this.dataId)
			// 	this.details = res.data
			// },
			async buyPay() {
				if (!this.shopaddress.id) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return
				}
				let that = this
				let productList = []
				this.list.forEach(item => {
					item.cart.forEach(item2 => {
						item2.productTotalPrice = item2.productPrice * item2.productNum
						productList.push({
							shopId: item2.shopId,
							productId: item2.productId,
							productNum: item2.productNum,
							productPrice: item2.productPrice,
							productTotalPrice: item2.productTotalPrice
						})
					})
				})
				productList = JSON.parse(JSON.stringify(productList))
				let mood = ''
				// let form ={
				// 	addressId: this.shopaddress.id,
				// 	totalPrice: this.totalPrice,
				// 	JiajiaMailOrderDetailList:productList
				// }
				// console.log(JSON.stringify(form))
				console.log(productList)
				let res = await this.$request('mall/order/add', {
					addressId: this.shopaddress.id,
					totalPrice: this.totalPrice,
					jiajiaMailOrderDetailList: productList
				}, 'post', 'json')
				if (res.msg == '操作成功') {
					if (res.data.type == 1) {
						uni.showModal({
							title: '提示',
							content: '积分抵扣，还需支付' + res.data.actualPrice + '元',
							success: function(res1) {
								if (res1.confirm) {
									that.$request('pay/xiaoChengXuMallPay', {
										id: res.data.orderId,
									}).then(res2 => {
										if (res2.msg == '操作成功') {
											mood = res2.data
											// #ifdef MP-WEIXIN

											uni.requestPayment({
												provider: 'wxpay', // 服务提提供商
												timeStamp: mood.timeStamp, // 时间戳
												nonceStr: mood.nonceStr, // 随机字符串
												package: mood.package,
												signType: mood.signType, // 签名算法
												paySign: mood.paySign, // 签名
												success: function(res3) {
													uni.removeStorageSync('shop')
													uni.showToast({
														title: '支付成功',
														icon: 'none'
													})
													setTimeout(() => {
														uni.navigateTo({
															url: '/pages/shop/orderList/orderList?cont=1'
														})
													}, 1000)

												},
												fail: function(err) {
													console.log('支付失败', err);
												}
											});
											// #endif
											// #ifdef H5
											if (that.$jwx && that.$jwx.isWechat()) { //检查是否是微信环境  	
												that.$jwx.wxpay({ //调用支付，
													'timestamp': mood.timeStamp,
													'nonceStr': mood.nonceStr,
													'package': mood.package,
													'signType': mood.signType,
													'paysign': mood.paySign
												}, function(r) {
													if (r.errMsg == 'chooseWXPay:ok') {
														uni.reLaunch({
															url: "/pages/shop/orderList/orderList"
														})
													} else {
														that.$msg('支付失败！');
													}
												});

											} else {
												uni.showToast({
													title: '请在微信环境下运行',
													icon: 'none'
												})
												return
											}

											// #endif
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '当前积分充足，是否支付',
							success: function(res1) {
								if (res1.confirm) {
									that.$request('mall/order/editOrderStatus', {
										id: res.data.orderId
									}).then(res2 => {
										if (res2.msg == '操作成功') {
											uni.removeStorageSync('shop')
											uni.showToast({
												title: '支付成功',
												icon: 'none'
											})
											setTimeout(() => {
												uni.navigateTo({
													url: '/pages/shop/orderList/orderList?cont=1'
												})
											}, 1000)
										}
									})

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				}
				console.log(res)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		height: 100vh;
		box-sizing: border-box;
		overflow: scroll;
		padding-bottom: 200rpx;
		background-color: #f5f5f5;
	}

	.orderBox {
		width: 710rpx;
		padding-bottom: 28rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 20rpx;

		.title {
			height: 83rpx;
			display: flex;
			width: 100%;
			align-items: center;
			padding: 0 13rpx;

			.icon-dianpu {
				font-size: 31rpx;
				color: #333333;
				margin-right: 16rpx;
			}

			.storeName {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}

		}

		.line {
			margin: 0 15rpx 0 12rpx;
			width: 683rpx;
			height: 1rpx;
			background: #E5E5E5;
		}

		.main {
			display: flex;
			padding: 22rpx 20rpx 28rpx;
			box-sizing: border-box;

			.pic {
				margin-right: 22rpx;
				width: 155rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				height: 155rpx;
			}

			.mainRight {
				position: relative;
				width: 100%;
				display: flex;

				.shopName {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.price {
					margin-left: auto;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.number {
					position: absolute;
					top: 60%;
					right: 0;
					transform: translateY(-50%);
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					display: flex;
					align-items: center;

					.chenghaoIcon {
						width: 30rpx;
						height: 30rpx;
					}
				}

			}

		}

		.labelBox {
			width: 100%;
			box-sizing: border-box;
			padding: 0 18rpx;

			.label {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;

				&:nth-child(1) {
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.add {
		width: 200rpx;

	}

	.time {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		top: 82%;
		left: 40%;
	}

	.change {
		position: absolute;
		top: 42%;
		right: 5%;
	}

	.cradBox {
		width: 710rpx;
		height: 360rpx;
		position: relative;
		margin-left: 45rpx;
		margin-top: 20rpx;
	}

	.carImg {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		position: absolute;
	}

	.money {
		color: #fff;
		font-weight: 600;
		font-size: 50rpx;
		position: absolute;
		top: 40%;
		left: 20%;
	}

	.name {
		width: 170rpx;
		height: 55rpx;
		color: #FF9329;
		text-align: center;
		background-color: #fff;
		line-height: 55rpx;
		position: absolute;
		top: 80%;
		left: 10%;
		border-radius: 23rpx;
		font-size: 26rpx;
	}

	.two_box_flx {
		display: flex;
		align-items: center;
	}

	.two_box_text {
		color: #999;
		font-size: 28rpx;
		margin-right: 15rpx;
	}

	.bottom_box_ba {
		font-size: 30rpx;
		font-weight: 600;
		color: #D42A1B;
	}

	.bottom_box_xa {
		font-size: 46rpx;
		font-weight: 600;
		color: #D42A1B;
	}

	.bottom_box_la {
		font-size: 30rpx;
	}

	.three_title {
		font-size: 25rpx;
	}

	.three_box {
		width: 710rpx;
		padding: 20rpx;
		margin-left: 15rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.two_xiazi {
		width: 40rpx;
		height: 40rpx;
	}

	.two_din_zi {
		margin-left: 15rpx;
	}

	.two_din_img {
		width: 50rpx;
		height: 50rpx;
	}

	.two_din_box {
		display: flex;
		align-items: center;
	}

	.two_din {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.two_box {
		width: 710rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin: 20rpx;
		margin-left: 15rpx;
	}

	.san_two {
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.san_one {
		font-size: 24rpx;
		margin-left: 40rpx;
		color: red;
	}

	.MART {
		font-weight: 600;
	}

	.marl {
		margin-left: 20rpx;
	}

	.moimage {
		width: 130rpx;
		height: 130rpx;
		border-radius: 10rpx;
	}

	.xia_one {
		margin-top: 20rpx;
		display: flex;
	}

	.xia_name {
		font-size: 24rpx;
	}

	.xia_box {
		width: 710rpx;
		padding: 20rpx;
		background-color: #fff;
		margin-left: 15rpx;
		border-radius: 10rpx;
	}

	.shuimg {
		width: 11rpx;
		height: 18rpx;
		margin-top: 15rpx;
	}

	.pohone {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.title {
		width: 490rpx;
	}

	.one_img {
		width: 30rpx;
		height: 36rpx;
		margin-top: 15rpx;
	}

	.top_one {
		width: 710rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.bottom_box_button {
		width: 266rpx;
		height: 65rpx;
		text-align: center;
		line-height: 65rpx;
		color: #fff;
		border-radius: 32.5rpx;
		background-color: #D42A1B;
		margin-right: 50rpx;
	}

	.bottom_box_one {
		display: flex;
		margin-left: 40rpx;
		align-items: center;
	}

	.bottom_box {
		width: 750rpx;
		height: 110rpx;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding-top: 15rpx;
		position: fixed;
		bottom: 0%;
	}
</style>